<template>
    <div id="app" ref="appBox">
      <musicHeader></musicHeader>
           <keep-alive >
               <router-view v-if="$route.meta.keepAlive"> </router-view>
           </keep-alive>
               <router-view v-if="!$route.meta.keepAlive"> </router-view>
        <Mscroll></Mscroll>
       <PlaymusicBar></PlaymusicBar>
    </div>
</template>

<script>
import musicHeader from "./layout/header/header.vue"
 import  Mscroll  from './components/scroll/scroll.vue'
import PlaymusicBar from './components/playmusic_bar/playmusic_bar.vue'
export default {
  components:{
     musicHeader,
     PlaymusicBar,
     Mscroll
  },
  data() {
     return {
        flag:true
     }
  },
  watch:{
      $route(to){
            this.$refs.appBox.style.overflow = to.meta.overflow    
      }
  },
  mounted(){
    this.$refs.appBox.style.overflow ="scroll"
  }
}
</script>

<style scoped>
@import url("./style/globel/normalize.css");
@import url("./style/globel/globel.css");
#app{
   position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 0;
    overflow: scroll;
    overflow-x: auto;
}
</style>
